<template>
  <a-form-item style="" label="选择产品" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
    <div style="">
      <!-- <a-button @click="add(-1, {})" type="primary" :disabled="disabled">新增</a-button> -->
      <a-button @click="$refs.proplanComp.open()" type="primary" :disabled="disabled">批量添加</a-button>
      <a-button @click="del" type="danger" :disabled="delDisable || disabled">删除</a-button>
    </div>
    <vxe-table
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      align="center"
      style=""
      ref="xTable"
      border
      show-overflow
      :data="dataSource"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
      :edit-rules="{proCode:[{required:true}],proId:[{required:true,message:'产品名称不能为空'}],proUnit:[{required:true}],plaNum:[{required:true}],plaStartTime:[{required:true,message:'开始时间不能为空'}],plaEndTime:[{required:true,message:'结束时间不能为空'}]}"
      @checkbox-all="checkboxAll"
      @checkbox-change="checkboxChange"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column min-width="110" field="proCode" title="产品编号" :edit-render="{name:'proCode'}">
        <template #default="{ row }">
          <span>{{ formatProCode(row.proId) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-input v-model="row.proId" disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column min-width="110" field="proId" title="产品名称" :edit-render="{name:'proId'}">
        <template #default="{ row }">
          <span>{{ formatProName(row.proId) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select
            v-model="row.proId"
            transfer
            @change="
              ({ value, $event }) => {
                proChange({ value, $event }, row)
              }
            "
            :disabled="disabled"
          >
            <vxe-option v-for="item in proList" :key="item.id" :value="item.id" :label="item.name"></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column min-width="110" field="proUnit" title="产品单位" :edit-render="{name:'proUnit'}">
        <template #default="{ row }">
          <span>{{ 'unit' | dictType(formatProUnit(row.proId)) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-input v-model="row.proId" disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column min-width="100" field="workOrderNo" title="工单编号" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.workOrderNo" placeholder="待生成" disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
      <!-- field="proplanNum" name再改 -->
      <vxe-column min-width="110" field="plaNum" title="生产数量" :edit-render="{name:'plaNum'}">
        <template #edit="{ row }">
          <vxe-input v-model="row.plaNum" :min="1" type="number" placeholder="请输入生产数量" :disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column min-width="200" field="plaStartTime" title="计划开始时间" :edit-render="{name:'plaStartTime'}" :edit-rules="{ required: true }">
        <template #edit="{ row }">
          <vxe-input v-model="row.plaStartTime" type="datetime" placeholder="请选择计划开始时间" transfer :disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column min-width="200" field="plaEndTime" title="计划结束时间" :edit-render="{name:'plaEndTime'}">
        <template #edit="{ row }">
          <vxe-input v-model="row.plaEndTime" type="datetime" placeholder="请选择计划结束时间" transfer :disabled="disabled"></vxe-input>
        </template>
      </vxe-column>
    </vxe-table>
    <proplan-comp ref="proplanComp" @confirm="handleProplanCompConfirm" @ok="getproList()" />
  </a-form-item>
</template>

<script>
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import proplanComp from './proplanComp.vue'
import moment from 'moment'
export default {
  name: 'TableFormItem',
  components: { proplanComp },
  props: {
    dataSource: {
      type: Array,
      require: false,
      default() {
        return []
      }
    },
    proList: {
      type: Array,
      require: false,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    plaNum: {
      type: Number,
      require: false,
      default: null
    }
  },
  data() {
    return {
      delDisable: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      delDataId: [],
      unit: [],
      nowTime: undefined,
      plaStartTime: undefined,
      plaEndTime: undefined
    }
  },
  created() {
    this.unit = this.$options.filters['dictData']('unit')
  },
  methods: {
    moment,
    formatProName(value) {
      return this.$utils.find(this.proList, (item) => item.id === value)?.name
    },
    formatProCode(value) {
      return this.$utils.find(this.proList, (item) => item.id === value)?.code
    },
    formatProUnit(value) {
      return this.$utils.find(this.proList, (item) => item.id === value)?.unit
    },
    async add(row, record) {
      // 获取初始时间
      this.nowTime = new Date(new Date().setHours(0, 0, 0, 0))
      this.plaStartTime = new Date(new Date().setHours(0, 0, 0, 0))
      this.plaEndTime = new Date(this.nowTime.setDate(this.nowTime.getDate() + 1))
      // 设置默认数量
      record.plaNum = 1
      // 变更数量
      const plaNum = this.plaNum
      if (plaNum) {
        record.plaNum = plaNum
      }
      // 开始时间
      const plaStartTime = moment(this.plaStartTime).format('YYYY-MM-DD HH:mm')
      if (plaStartTime) {
        record.plaStartTime = plaStartTime
      }
      // 结束时间
      const plaEndTime = moment(this.plaEndTime).format('YYYY-MM-DD HH:mm')
      if (plaEndTime) {
        record.plaEndTime = plaEndTime
      }
      const $table = this.$refs.xTable
      await $table.insertAt(record, row)
      await this.$emit('add', $table.getTableData())
    },
    async del() {
      const type = await VXETable.modal.confirm('您确定要删除该数据?')
      const $table = this.$refs.xTable
      if (type === 'confirm') {
        await $table.removeCheckboxRow()
      }
      await this.$emit('del', $table.getTableData())
    },
    isDisableDel() {
      this.delDisable = this.$refs.xTable.getCheckboxRecords().length <= 0
    },
    checkboxAll({ checked, $event }) {
      this.isDisableDel()
    },
    checkboxChange({ checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
      this.isDisableDel()
    },
    proChange({ value }, row) {
      const pro = XEUtils.find(this.proList, (item) => item.id === value)
      if (pro.mulBadItem) {
        row.mulBadItem = pro.mulBadItem.split(';')
      }
    },
    // 选中产品表确认方法
    handleProplanCompConfirm(data) {
      data.forEach((item) => {
        this.add(-1, {
          proId: item.id
        })
      })
    },
    formatPro(value) {
      return this.$utils.find(this.proList, (item) => item.id === value)?.name
    }
  },
  watch: {
    //  监听tableData变化
    tableData: {
      handler() {
        this.$emit('tableDataChange', this.tableData)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
</style>
